<template>
  <!-- 13.1 先对[文章分类、文章列表]设置初始代码： -->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>文章分类</span>
        <el-button type="primary" size="mini" @click="addCateShowDialogBtn">添加分类</el-button>
      </div>
      <!-- 13.4 初始化下方表格： -->
      <el-table
       :data="tableList"
       style="width: 100%"
       border
       >
        <!-- 细节7：type 是 table-column内置属性, 你告诉他用index, 则第一个单元格用的是索引值 -->
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="cate_name" label="分类名称"></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column label="操作">
          <!-- 细节8：作用域插槽scope → { row: 行对象 }可直接获取到某行数据 -->
          <template v-slot="scope">
            <!-- 15.2 进行点击[修改]按钮触发对应 修改数据接口 ↓↓↓ -->
            <el-button type="primary" size="mini" @click="updateArtCate(scope.row)">修改</el-button>
            <!-- 16.2 进行点击[删除]按钮触发对应 删除数据接口 ↓↓↓ -->
            <el-button type="danger" size="mini" @click="deleteArtCate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 13.6 点击[添加分类]弹出-对话框 -->
    <el-dialog
      title="添加分类"
      width="30%"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      @close="dialogClose"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
        <!-- 13.7 上方表单准备 -->
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="ruleForm.cate_name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="ruleForm.cate_alias" placeholder="请输入别名"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
         type="primary"
         @click="confirmFn"
        >
        <!-- 14.2 点击对话框[确定]按钮,调用添加接口 -->
         确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getArtCateList, addArtCateAPI, updateArtCateAPI, removeArtCateAPI } from '@/api' // 13.3/ 14.2/ 15.3/ 16.2
export default {
  data () {
    return {
      tableList: [], // 13.5 定义空表格数组
      dialogVisible: false, // 13.6
      ruleForm: { // 13.7
        cate_name: '',
        cate_alias: ''
      },
      rules: { // 13.7
        cate_name: [
          // 提：前一栏为未输入内容的提示，后一栏为输入后的判断提示.
          { required: true, message: '请输入名称', trigger: ['blur', 'change'] },
          { pattern: /^\S{1,10}$/, message: '请输入 1-10 位非空字符串！！！', trigger: ['blur', 'change'] }
        ],
        cate_alias: [
          { required: true, message: '请输入别名', trigger: ['blur', 'change'] },
          { pattern: /^[a-zA-Z0-9]{1,15}$/, message: '输入的内容只能是 1-15 位的字母、数字', trigger: ['blur', 'change'] }
        ]
      },
      // 15.3 同步：
      isEdit: false, // true为 编辑(修改) 状态, false为 新增 状态.
      editId: '' // 保存正在要 编辑(修改) 的数据id值.
    }
  },
  created () {
    // 13.3同步
    this.getArtCate()
  },
  methods: {
    async getArtCate () {
      // 13.3同步
      const res = await getArtCateList()
      // 13.5
      this.tableList = res.data
    },
    // 13.6 对应的关闭前方法：
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done() // done 是用于触发确定关闭.
        })
        .catch(_ => {})
    },
    // 13.8 关闭对话框后清空内容：
    dialogClose () {
      // console.log(this.$refs.ruleForm)
      this.$refs.ruleForm.resetFields()
    },
    // 15.3 改良：将[添加分类]按钮, 事件封装成函数,进行触发对话框的显示：
    addCateShowDialogBtn () {
      this.isEdit = false // 变回[新增] → 状态标记.
      this.editId = ''
      this.dialogVisible = true
    },
    /* // 14.2 添加[文章分类]方法：(划去) */
    // 15.3 改良 → 特殊处理：对于 对话框上的[确定]按钮,可分为多个事件进行使用,因此要进行条件判断：
    confirmFn () {
      // ① 添加前,还需进行表单验证
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          // 15.4 最后加上判断是否处于[编辑]的状态.
          if (this.isEdit) {
            // 要修改的：
            const res = await updateArtCateAPI({ id: this.editId, ...this.ruleForm })
            if (res.code !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
          } else {
            // 要新增的：
            const res = await addArtCateAPI(this.ruleForm)
            if (res.code !== 0) return this.$message.error(res.message)
            this.$message.success(res.message)
          }
        }
        // ② 添加完成后关闭对话框：
        this.dialogVisible = false
        // ③ 重新渲染
        this.getArtCate()
      })
    },
    // 15.2 修改(对应行数据)业务 (先进行数据回显)
    async updateArtCate (obj) {
      // obj的值：当前所点到那行的数据.
      // console.log(obj)
      // 15.3 同步：
      // ① 先设置当前状态为[编辑]
      this.isEdit = true // 正处编辑(修改)状态
      this.editId = obj.id // 细节9：将id存放入 data下, 方便后续接口直接找data下的！！！
      // ② 显示对话框(用原先写好的那个)
      this.dialogVisible = true

      // ③ 将当前行的数据赋给 ruleForm, 让输入框有对应内容：
      // (细节10)15.end：dialog、form和回显 一同使用的bug：
      // 问题：第一次打开网页, 先点修改, 后点新增, 发现输入框有值
      // 原因：点击修改后, 关闭对话框的时候, 置空失效了
      // resetFields有问题, 且Dialog内容为懒加载, 即第一次被打开前, 传入的默认 slot 不会被渲染到DOM

      // 解决：让 真实DOM 先创建并 在内部 绑定复制好初始值
      // 当 真实DOM 更新并绑定好, 再给数据回显：(该步为重点, 可学！！！)
      this.$nextTick(() => {
        this.ruleForm.cate_name = obj.cate_name
        this.ruleForm.cate_alias = obj.cate_alias
      })
    },
    // 16.2 删除业务
    async deleteArtCate (obj) {
      // console.log(obj)
      const res = await removeArtCateAPI(obj.id)
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      this.getArtCate()
    }
  }
}
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
